import { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function ShadowStyle() {
    const ref: any = useRef(null);

    let echartsInstance: any = null;

    const renderEcharts = () => {
        const renderedInstance = echarts.getInstanceByDom(ref.current);
        if (renderedInstance) {
            echartsInstance = renderedInstance;
        } else {
            echartsInstance = echarts.init(ref.current);
        }
        const option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                    shadowStyle: {
                        color: "rgba(214,215,217,0.25)",
                    },
                },
            },
            color: ["#68b92e"],
            xAxis: [
                {
                    name: "",
                    type: "category",
                    data: ["2024-02-01 14:00:00", "2024-02-01 21:00:00", "2024-02-02 04:00:00", "2024-02-02 11:00:00", "2024-02-02 18:00:00"],
                },
            ],
            yAxis: {
                name: "",
                type: "value",
            },
            series: [
                {
                    name: "日志数",
                    type: "bar",
                    data: [65, 16, 5, 0, 0],
                    barWidth: 35,
                    itemStyle: {
                        barBorderRadius: 5,
                    },
                },
            ],
        };
        echartsInstance.setOption(option);
    };

    useEffect(() => {
        renderEcharts();
    }, []);

    useEffect(() => {
        window.onresize = function () {
            echartsInstance.resize();
        };
        return () => {
            echartsInstance && echartsInstance.dispose();
        };
    }, []);

    return (
        <div>
            <button className="returnButton" style={{ padding: "0px",display:"99" }}>
                <a href="/">点击返回主菜单</a>
            </button>
            <h2>鼠标划过显示背景阴影</h2>
            <div style={{ width: "100%", height: "70vh" }} ref={ref} />
        </div>
    );
}
